<template>
	<div id="now">
	<ul>
	<li v-for="item in nowPlayData" :key="item.id">
		<div class="first">
		 <img :src="item.img" >
		</div>
		<div class="second">
		 <p class="title">{{item.title}}</p>
		 <p><span class="font-color">观众评</span><span class="score">{{item.score}}</span></p>	
		 <p class="actors font-color" >{{item.actors}}</p>	
		 <p class="font-color">{{item.nums}}</p>	
		</div>
		<div class="third">
		 <button>购票</button>	
		</div>
	</li>
	
	</ul>
	</div>
</template>

<script>
	export default{
		name:'Now',
		methods:{
				getNowPlayData(){
					var that = this;
					axios.get("/mock/nowPlayDate.json")
					.then(function (response){
						console.log(response);
						if(response.status == 200){
							if(response.data && response.data.nowPlayData){
							 that.nowPlayData=response.data.nowPlayData;	
							}
						}
					})
					.catch(function (error){
						console.log(error);
					});
				}
			},
			created(){
				this.getNowPlayData();
			},
			data(){
				return{
					nowPlayData: []
				}
			}
		}
</script>

<style scoped>
	#now{
		width: 100%;
		padding-bottom: 50px;
	}
img{
	width: 80px;
}
div{
	float: left;
}
.first{
	width: 25%;
	margin-bottom: 8px;
}
.second{
	width:58% ;
}
.actors{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.third{
	width: 15%;
	text-align: center;
	line-height: 75px;
	
}
li{
	overflow: hidden;
	margin: 10px;
	border: 1px solid #CCCCCC;
}
.title{
	font-size: 18px;
	font-weight: bold;
	
}
p{
	line-height: 25px;
}
.font-color{
	color: #666666;
}
.score{
	color: #FF9900;
	margin-left: 5px;
	font-weight: bold;
}
button{
	background: #E54847;
	width: 45px;
	height: 30px;
	border: none;
	color: white;
	border-radius: 5px;
}
</style>
